<template>
    <div>
        <el-form style="margin-top: 5px;" ref="form" label-position="left" label-width="80px" :inline="true" :model="form"
            size="small" :rules="formrules">
            <el-row :gutter="10" class="tabs-box">
                <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                    <el-form-item label="logo:" prop="logo">
                        <el-image v-if="ifdisabled" style="width: 90px; height: 90px;border-radius: 5px;"
                            :src="form.logo" />
                        <logo-upload v-else :single-file="background_imageFile" :show-file-list="false"
                            accept="image/jpeg, image/png" @uploadCallback="background_imageCallback" />
                    </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                    <el-form-item label="店铺背景:" prop="background">
                        <el-image v-if="ifdisabled" style="width: 90px; height: 90px;border-radius: 5px;" :src="form.background" />
                        <logo-upload v-else :single-file="background_imageFile" :show-file-list="false"
                            accept="image/jpeg, image/png" @uploadCallback="background_imageCallback" />
                    </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                    <el-form-item label="商户名称:" prop="name">
                        <div v-if="ifdisabled">{{ form.name }}</div>
                        <el-input v-else placeholder="请输入商户名称" v-model="form.name"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                    <el-form-item label="商户类目:" prop="">
                        <div v-if="ifdisabled">{{ form.category }}</div>
                        <el-input v-else placeholder="请输入账户类目" v-model="form.category"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                    <el-form-item label="商户类型:" prop="">
                        <el-radio-group v-model="form.type" :disabled="ifdisabled">
                            <el-radio label="1">个人</el-radio>
                            <el-radio label="2">个体工商</el-radio>
                            <el-radio label="3">企业</el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                    <el-form-item label="入住时间:" prop="">
                        <div v-if="ifdisabled">{{ form.time }}</div>
                        <el-date-picker v-else v-model="form.time" type="date" placeholder="请选择入住时间"></el-date-picker>
                    </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                    <el-form-item label="联系人:" prop="">
                        <div v-if="ifdisabled">{{ form.person }}</div>
                        <el-input v-else placeholder="请输入联系人姓名" v-model="form.person"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                    <el-form-item label="联系电话:" prop="">
                        <div v-if="ifdisabled">{{ form.tel }}</div>
                        <el-input v-else placeholder="请输入联系电话" v-model="form.tel"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                    <el-form-item label="覆盖区域:" prop="">
                        <div v-if="ifdisabled">{{ form.tel }}</div>
                        <el-input v-else placeholder="请输入联系电话" v-model="form.tel"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                    <el-form-item label="联系地址:" prop="">
                        <div v-if="ifdisabled">{{ form.tel }}</div>
                        <el-input v-else placeholder="请输入联系电话" v-model="form.tel"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                    <el-form-item label="店铺介绍:" prop="">
                        <div v-if="ifdisabled">{{ form.tel }}</div>
                        <el-input v-else placeholder="请输入联系电话" v-model="form.tel"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                    <el-form-item label="店铺备注:" prop="">
                        <div v-if="ifdisabled">{{ form.tel }}</div>
                        <el-input v-else placeholder="请输入联系电话" v-model="form.tel"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>

            <div class="button-box">
                <el-button type="primary" @click="ifdisabled ? ifdisabled = false : save()">{{ ifdisabled ? '编辑'
                    : '保存' }}</el-button>
            </div>
            <div class="blockquote-box flex-between">
                <div>关联账户</div>
                <div class="relevance">已关联</div>
                <!-- <div><el-button type="text" icon="el-icon-document" @click="ifshow = true">关联记录</el-button></div> -->
            </div>
            <el-row :gutter="10" class="tabs-box">
                <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                    <el-form-item label="账户ID:" prop="">
                        <div>{{ form.ID }}</div>
                    </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                    <el-form-item label="登录账户:" prop="">
                        <div>{{ form.ID }}</div>
                    </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                    <el-form-item label="创建时间:" prop="">
                        <div>{{ form.ID }}</div>
                    </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                    <el-form-item label="更新时间:" prop="">
                        <div>{{ form.ID }}</div>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
    </div>
</template>
<script>
//图片上传
import LogoUpload from '@/components/FileUpload'
export default {
    name: "BasicInformation",
    props: [],
    components: { LogoUpload },
    data() {
        return {
            ifdisabled: true,
            form: {
                logo: '',
                background: '',
                name: '河南天蓝',
                category: '服装行业',
                type: '1',
                time: '2023-10-10',
                person: '联系人',
                tel: '18888888888'

            },
            background_imageFile: {},
            formrules: {}
        };
    },
    methods: {
        //保存
        save() {
            console.log('保存');
            console.log(this.form)
            this.ifdisabled = true;
        },
        // 文件上传回调
        background_imageCallback(file) {
            this.background_imageFile = file;
            this.form.logo = file.url;
        },
    }
}
</script>
<style lang="scss" scoped>
.tabs-box {
    padding: 0 20px;

    .button-box {
        text-align: right;
    }
}

.blockquote-box {
    border-left: 4px solid #409eff;
    padding: 0 16px;
    margin: 16px 0;
    height: 40px;
    line-height: 40px;
    background: #fafafa;
    font-size: 14px;

    .relevance {
        color: #67C23A;
    }
}

.flex-between {
    display: flex;
    justify-content: space-between;
}
</style>
<style lang="scss">
.tabs-box {
    .el-form-item {
        margin-bottom: 10px;
    }
}
</style>